<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog v-model="props.addVisible" :title="props.operateType === 'ADD' ? '新增业务场景' : '编辑业务场景'" @close="handleVisible('cancel')" width="600px">
    <el-form ref="FormRef" :model="formData" :rules="rules" size="small" label-width="160px">
      <el-form-item label="业务场景名称：" prop="sceneName">
        <el-input v-if="props.operateType === 'ADD'" :disabled="justAddSystem" v-model="formData.sceneName" clearable placeholder="请输入业务场景名称"></el-input>
        <el-select v-else v-model="formData.sceneName" @change="sceneChange">
          <el-option v-for="item in props.sceneMapList" :key="item.sceneCode" :label="item.sceneName" :value="item.sceneName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务场景代码：" prop="sceneCode">
        <el-input :disabled="justAddSystem || props.operateType === 'EDIT'" v-model="formData.sceneCode" clearable placeholder="请输入业务场景代码"></el-input>
      </el-form-item>
      <el-form-item label="业务系统名称：" prop="systemName">
        <el-input v-model="formData.systemName" clearable placeholder="请输入业务系统名称"></el-input>
      </el-form-item>
      <el-form-item label="场景描述：" prop="sceneDescription">
        <el-input v-model="formData.sceneDescription" type="textarea" :rows="3"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="handleVisible('cancel')">取消</el-button>
        <el-button size="small" type="primary" @click="submitAdd"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<!-- 新增型材 -->
<script name="AddBusinessDialog" setup>
import { addBusinessScene, updateBusinessScene } from '@/api/metaData';
const props = defineProps(['addVisible', 'sceneCode', 'sceneName', 'justAddSystem', 'rowData', 'sceneMapList', 'operateType']);
const emit = defineEmits(['handleEvent']);
const FormRef = ref();
const formShow = ref(false);
const formData = ref({
  sceneName: props?.sceneName || props?.rowData?.sceneName || '',
  sceneCode: props?.sceneCode || props?.rowData?.sceneCode || '',
  systemName: props?.rowData?.systemName || '',
  sceneDescription: props?.rowData?.sceneDescription || '',
  isEnabled: 1,
  id: props?.rowData?.id
});
const rules = ref({
  sceneName: [{ required: true, message: '业务场景名称不能为空', trigger: 'blur' }],
  sceneCode: [{ required: true, message: '业务场景代码不能为空', trigger: 'blur' }],
  systemName: [{ required: true, message: '业务系统名称不能为空', trigger: 'blur' }],
  sceneDescription: [{ required: true, message: '场景描述不能为空', trigger: 'blur' }]
})
onMounted(async () => {
  
});
const sceneChange = (val) => {
  if (val) {
    formData.value.sceneCode = props.sceneMapList.find(item => item.sceneName === val)?.sceneCode;
  }
}
const handleVisible = (type) => {
  if (type === 'cancel') {
    emit('handleEvent', { type: 'cancel'});
  } else {
    emit('handleEvent', { type: 'refresh' });
  }
};
const submitAdd = () => {
  // if( modalType === 'edit'){
  //   formData.value.id = props.rowData.id;
  // }
  FormRef.value.validate((valid) => {
    if (!valid) {
      return false;
    } else {
      props?.rowData?.id ? 
      updateBusinessScene(formData.value).then((res) => {
        if (res) {
          ElMessage({ showClose: true, message: '更新成功。', type: 'success' });
          props.addVisible = false;
          emit('handleEvent', { type: 'refresh' });
        }
      }) : 
      addBusinessScene(formData.value).then((res) => {
        if (res) {
          ElMessage({ showClose: true, message: '新增成功。', type: 'success' });
          props.addVisible = false;
          emit('handleEvent', { type: 'refresh' });
        }
      });
    }
  })
};
</script>